<template>
	<view class="bg">
		<head-navigation :title="'商户详情'" :is-back="1" :background-color="'#FFF'"></head-navigation>

		<swiper class="img" circular :interval="5000" autoplay>
			<swiper-item v-for="(item,index) in info.shopImgList" :key="index">
				<image class="img" :src="item?item:'/static/shop_logo.png'" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="content">
			<view class="content_title">{{info.shortName}}</view>
			<view class="content_address">
				<text class="content_address_d">{{distance}}km</text>
				<text class="content_address_addr ellipseHide">{{info.address}}</text>
				<image class="addressImg" src="/static/index/shop_address_icon.png" mode="aspectFill" @click="daohang">
				</image>
			</view>
			<!-- <image class="img_one" src="/static/index/search.png" mode="aspectFill"></image> -->
			<!-- <view class="shop_i">
				<image class="shop_img" src="/static/index/shop_i_bg.png" mode="widthFix"></image>
				<view class="shop_title">店铺权益</view>
				<view class="shop_three">
					<image class="shop_img_three" src="/static/index/shop_details_1.png" mode="aspectFill"></image>
					<image class="shop_img_three" src="/static/index/shop_details_2.png" mode="aspectFill"></image>
					<image class="shop_img_three" src="/static/index/shop_details_3.png" mode="aspectFill"></image>
				</view>
			</view> -->
			<image class="img_qy"
				src="https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/c4ead18ff8e44eeb9e28b5fb337b31eb.png" mode="aspectFill">
			</image>
		</view>
		<view class="tab_shop">
			<image src="/static/index/shop_ic.png" mode="aspectFill"></image>
			<text>附近店铺</text>
		</view>
		<view class="bg_shop">
			<view class="no_info" v-if="shopList.length==0" style="padding-top:320rpx;">
				<image src="/static/my/order_no.png" mode="widthFix" style="width: 400rpx;"></image>
				<text>暂无商户</text>
			</view>
			<view class="shop_content" v-for="(item,index) in shopList" :key="index" @click="jumpDetails(item)">
				<image class="icon" :src="item.logo==''?'/static/shop_logo.png':item.logo" mode="aspectFill"></image>
				<view class="c">
					<view class="title ellipseHide">{{item.shortName}}</view>
					<view class="address_content">
						<image class="location_img" src="/static/index/address_2.png" mode="aspectFill"></image>
						<view class="address_content_c ellipseHide_two">
							<text class="address_content_d">{{item.distance}}km</text>
							<text class="address_content_address">{{item.address}}</text>
						</view>
					</view>
					<view v-if="item.isConsumption==2" class="xfjf">消费积分</view>
				</view>
			</view>
			<view style="height: 168rpx;"></view>

		</view>
		<view class="bottom">
			<view class="bottom_nav" @click="daohang">
				<image src="/static/index/shop_b_location.png" mode="widthFix"></image>
				<view>导航</view>
			</view>
			<view class="bottom_phone" @click="makePhoneCall(info.phone)">
				<image src="/static/index/shop_b_phone.png" mode="widthFix"></image>
				<view>电话</view>
			</view>
			<!-- <view class="bottom_buy"><text>立即买单</text></view> -->
		</view>
		<uni-popup ref="phoneProp" style="z-index:9999;" type="bottom" mask-background-color="rgba(0,0,0,0.8)">
			<view class="phoneProp_box">
				<view class="phoneProp_box_ls" v-for="(item,pIndex) in phoneList" :key="pIndex"
					@click.stop="makeCall(item)">联系商家 {{item}}</view>
				<view style="height: 20rpx;background-color: #F1F1F1;"></view>
				<view class="phoneProp_box_ls_close" @click="makePhoneCallClose">取消</view>
			</view>
		</uni-popup>
	</view>

</template>

<script>
	import {
		shenyeParadiseShopLs,
		paradiseShopDetail
	} from '@/api/shenyeParadise.js'

	export default {
		data() {
			return {
				id: '',
				distance: '',
				latitude: '', //纬度
				longitude: '', //经度
				shopList: [], //店铺列表
				listTotal: 0, //总数
				pageSize: 10, //每页记录数
				pageNum: 1, //当前页码
				info: {},
				phoneList: [],
			}
		},
		onLoad(e) {
			this.id = e.id
			this.distance = e.distance
			this.getInfo()
			this.isToken = (this.$queue.getData('token') != undefined && this.$queue.getData('token') != '') ? true : false
		},
		methods: {
			//获取信息
			async getInfo() {
				try {
					const res = await paradiseShopDetail(this.id)
					this.info = res.result
					this.latitude = this.info.lat
					this.longitude = this.info.lnt
					const phoneArray = res.result.phone.split(',')
					this.phoneList = phoneArray
					this.phoneList.forEach((item, index) => {
						if (item == '') {
							this.phoneList.splice(index, 1)
						}
					})
					this.getShopList()
				} catch (e) {
					if (e.message == '店铺已下架') {
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}, 1500)
					}
					//TODO handle the exception
				}
			},
			async getShopList() { //查询店铺列表
				console.log('店铺请求')
				uni.showLoading({
					title: '加载中'
				})
				let data = {
					lat: this.latitude,
					lnt: this.longitude,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					filterShopId: this.id,
				}
				try {
					const res = await shenyeParadiseShopLs(data);
					uni.hideLoading()
					this.listTotal = res.result.total
					if (this.pageNum > 1) {
						this.shopList = this.shopList.concat(res.result.records); //将数据拼接在一起
					} else {
						this.shopList = res.result.records
					}
				} catch {

				} finally {
					setTimeout(res => {
						uni.hideLoading()
					}, 4000)
				}
			},
			jumpDetails(e) {
				uni.navigateTo({
					url: '/pages/merchant/merchantDetail?id=' + e.id + '&distance=' + e.distance
				})
			},
			// 导航
			daohang() {
				let that = this
				if (that.latitude == '' && that.longitude == '') {
					that.$queue.showToast('请在系统设置中打开定位服务!');
					return false
				}
				var obj = {
					latitude: that.info.lat,
					longitude: that.info.lnt,
					name: that.info.shortName,
					address: that.info.address,
				}
				this.$queue.openLocation(obj)
				// uni.navigateTo({
				//     url: '/pages/index/shenye-paradise/map/map?lat='+this.info.lat+'&lnt='+this.info.lnt+'&name='+this.info.shortName
				// })
			},
			//拨打电话弹窗打开
			makePhoneCall() {
				if (this.phoneList.length == 0) {
					this.$queue.showToast('该店铺没有添加联系方式')
				} else {
					this.$refs.phoneProp.open()
				}
			},
			//关闭拨打电话弹窗
			makePhoneCallClose() {
				this.$refs.phoneProp.close()
			},
			//拨打电话
			makeCall(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			// 页面上拉触底事件的处理函数
			onReachBottom: function() {
				// console.log("触底了", this.pageNum, Math.ceil(this.listTotal / this.pageSize), this.listTotal)
				if (this.pageNum >= Math.ceil(this.listTotal / this.pageSize)) {
					// this.moreShop = 'noMore'
				} else {
					// this.moreShop = 'more'
					this.pageNum++; //每触底一次 page + 1;
					this.getShopList()
				}
			}
		}
	}
</script>

<style scoped>
	.bg {
		background-color: #F5F8FE;
		min-height: 100vh;
	}

	.img {
		width: 100%;
		height: 230rpx;
	}

	.content {
		padding: 0 30rpx;
		background: linear-gradient(to bottom, #ffffff, #ffffff00);
		margin-top: -30rpx;
		position: relative;
		z-index: 2;
		border-radius: 30rpx 30rpx 0rpx 0rpx;

	}

	.addressImg {
		width: 52rpx;
		height: 52rpx;
	}

	.content_title {
		font-size: 34rpx;
		color: #222;
		font-weight: bold;
		padding: 30rpx 0 12rpx 0;
		background-color: #fff;
	}

	.content_address {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.content_address_d {
		font-size: 24rpx;
		color: #999;
		margin-right: 4rpx;
	}

	.content_address_addr {
		font-size: 28rpx;
		color: #222;
		margin-right: 26rpx;
		flex: 1;
	}

	.img_qy {
		width: 100%;
		height: 264rpx; 
		margin: 30rpx 0;
	}

	.img_one {
		width: 100%;
		height: 168rpx;
		border-radius: 16rpx;
		margin: 30rpx 0;
	}

	.tab_shop {
		display: flex;
		align-items: center;
		font-weight: bold;
	}

	.tab_shop image {
		width: 48rpx;
		height: 48rpx;
		margin: 0 12rpx 0 30rpx;
	}

	.tab_shop text {
		font-size: 32rpx;
		color: #222;
	}

	.bg_shop {
		margin-top: 20rpx;
	}

	.shop_content {
		box-shadow: 0rpx 0rpx 16rpx 0rpx #EAEAEA;
		background-color: #fff;
		border-radius: 8rpx;
		padding: 22rpx 20rpx 22rpx 24rpx;
		margin: 0 30rpx 30rpx;
		display: flex;
		flex-direction: row;
	}

	.shop_content .icon {
		width: 204rpx;
		height: 164rpx;
		border-radius: 8rpx;
	}

	.shop_content .c {
		display: flex;
		flex-direction: column;
		width: 426rpx;
		margin-left: 16rpx;
	}

	.shop_content .title {
		font-size: 30rpx;
		font-weight: bold;
	}

	.shop_content .address_content {
		display: flex;
		flex-direction: row;
		font-size: 24rpx
	}

	.shop_content .address_content .location_img {
		width: 24rpx;
		height: 24rpx;
		border-radius: 8rpx;
		margin-top: 16rpx;
	}

	.address_content_c {
		flex: 1;
		margin-top: 12rpx;
		margin-left: 6rpx;
	}

	.address_content_d {
		color: #FF2521;
		margin-right: 8rpx;
	}

	.address_content_address {
		color: #222;
	}

	.xfjf {
		border: 2rpx solid #64A8FB;
		border-radius: 8rpx;
		color: #64A8FB;
		font-size: 20rpx;
		width: 110rpx;
		text-align: center;
		margin-left: 15rpx;
		margin-top: 12rpx;
	}

	.shop_i {
		height: 254rpx;
		background: #FFF4F1;
		border-radius: 20rpx;
		margin: 40rpx 0;
	}

	.shop_i .shop_title {
		font-size: 32rpx;
		color: #222;
		padding: 20rpx 0 0 30rpx;
		font-weight: bold;
	}

	.shop_i .shop_img {
		position: absolute;
		z-index: 1;
		right: 30rpx;
	}

	.shop_three {
		display: flex;
		margin-top: 10rpx;
		justify-content: space-evenly;
	}

	.shop_img_three {
		width: 200rpx;
		height: 160rpx;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		background: #ffffff;
		width: 100%;
		height: 148rpx;
		display: flex;
		box-shadow: 0rpx -2rpx 8rpx 0rpx #CCCCCC59;

	}

	.bottom_nav {
		margin: 22rpx 74rpx 0 70rpx;
		font-size: 20rpx;
		color: #333;
	}

	.bottom_nav image {
		width: 40rpx;
	}

	.bottom_phone {
		margin: 22rpx 0 0 0;
		font-size: 20rpx;
		color: #333;
	}

	.bottom_phone image {
		width: 40rpx;
	}

	.bottom_buy {
		background: linear-gradient(111.64deg, #FF6E61 17.82%, #FF3230 72.01%);
		width: 310rpx;
		text-align: center;
		color: #fff;
		margin-top: 18rpx;
		margin-left: 192rpx;
		border-radius: 200rpx;
		align-items: center;
		display: flex;
		justify-content: center;
		height: 80rpx;
		font-size: 34rpx;
	}

	/* 电话弹窗  Star*/
	.phoneProp_box {
		background-color: #FFFFFF;
		border-radius: 28rpx 28rpx 0 0;
		width: 100%;
	}

	.phoneProp_box_ls {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #222222;
		font-size: 36rpx;
		height: 150rpx;
		border-bottom: 2rpx solid #F1F1F1;
	}

	.phoneProp_box .phoneProp_box_ls:last-child {
		border-bottom: 0;
	}

	.phoneProp_box_ls_close {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #222222;
		font-size: 36rpx;
		height: 150rpx;
	}

	/* 弹窗 end */
</style>